import React from 'react';
import {TopicTitle} from '../Topic';
import {TAB} from '../../../common/Const';
import {  Link } from 'react-router-dom'; 
import './style.css';

class Topics extends React.Component {

    constructor(props) {
        super(props);
        this.page = props.page || 1;
        this.pageSize = props.pageSize || 20;
        this.state = {
            loading: false,
        }
    }
    
    renderItem = (item) => {
        return <Link to={`/topic-detail/${item.id}`} key={item.id}><TopicTitle topic={item} key={item.id}/></Link>
        // return <TopicTitle topic={item} key={item.id}/>;
    };


    render() {
        const { topics } = this.props;
        return (
            <React.Fragment>
                <Header changeTab={this.props.changeTab}/>
                <div>{topics.map(this.renderItem)}</div>
            </React.Fragment>
        )
    }
}

class Header extends React.Component {

    constructor() {
        super();
        this.state = {
            active: "全部"
        }
    }

    changeTab = (value) => {
        this.setState({
            active: value
        });
        for (let key in TAB) {
            if (TAB[key] === value) {
                this.props.changeTab(key);
                return;
            }
        }
    }

    render() {
        const { active } = this.state;
        return (
            <div className="header">
                <span className={ active === '全部' ? 'active' : null } onClick={() => this.changeTab('全部')}>全部</span>
                <span className={ active === '分享' ? 'active' : null } onClick={() => this.changeTab('分享')}>分享</span>
                <span className={ active === '问答' ? 'active' : null } onClick={() => this.changeTab('问答')}>问答</span>
                <span className={ active === '任务' ? 'active' : null } onClick={() => this.changeTab('任务')}>任务</span>
                <span className={ active === '精华' ? 'active' : null } onClick={() => this.changeTab('精华')}>精华</span>
            </div>
        )
    }
}

export default Topics;
